<template>
  <d2-container>
    <template slot="header"></template>
    <el-row style="margin: 20px">
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增插件</el-button
      >
    </el-row>
    <template>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ 'font-size': '17px' }"
        style="width: 100%; font-size: 17px; margin-left: 15px"
      >
        <el-table-column prop="id" label="序号" align="center" width="180">
        </el-table-column>
        <el-table-column prop="name" label="名称" align="center" width="180">
        </el-table-column>
        <el-table-column prop="version" label="版本" align="center" width="180">
        </el-table-column>
        <el-table-column prop="admin" label="管理员" align="center" width="180">
        </el-table-column>
        <el-table-column prop="pluginType" align="center" label="类型">
        </el-table-column>
        <el-table-column prop="pluginCategory" align="center" label="分类">
        </el-table-column>
        <el-table-column prop="lang" align="center" label="语言">
        </el-table-column>
        <el-table-column prop="pluginStatus" align="center" label="状态">
        </el-table-column>
        <el-table-column prop="createTime" align="center" label="创建时间">
        </el-table-column>
        <el-table-column align="center" label="操作" width="150">
          <template slot-scope="scope">
            <!-- <el-button @click="editPlugin(scope.row)" type="text" size="small">编辑</el-button> -->
            <el-button @click="delPlugin(scope.row)" type="text" size="small"
              >卸载</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </template>

    <!-- 翻页 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="change"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(total)"
      >
      </el-pagination>
    </div>

    <el-dialog title="算法插件" :visible.sync="dialogFormVisible" width="35%">
      <el-form :model="form" v-loading="loading" style="width: 90%">
        <el-form-item label="插件名称" :label-width="formLabelWidth">
          <el-input v-model="form.pkgName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="插件版本" :label-width="formLabelWidth">
          <el-input v-model="form.pkgVersion" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="插件状态">
            <el-option label="开发状态" value="Dev"></el-option>
            <el-option label="迭代状态" value="Release"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务线" :label-width="formLabelWidth">
          <el-select v-model="form.projectName" placeholder="请选择业务线">
            <el-option
              v-for="item in projects"
              :key="item"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" :label-width="formLabelWidth">
          <el-input v-model="form.description" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="标签" :label-width="formLabelWidth">
          <el-input v-model="form.tags" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="分类" :label-width="formLabelWidth">
          <el-select v-model="form.category" placeholder="请选择分组">
            <el-option label="通用" value="Basic"></el-option>
            <el-option label="领域" value="Domain"></el-option>
            <el-option label="业务线" value="Project"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="文件" :label-width="formLabelWidth">
          <input type="file" ref="myfile" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addPlugin()">确 定</el-button>
      </div>
    </el-dialog>
  </d2-container>
</template>

<script>
import {
  listPluginPackages,
  delPluginPackage,
  uploadPlugin,
} from "@/api/task.plugin.js";

import { listAllProjects } from "@/api/operation.project.js";

import { publicMethod } from "@/api/util.js";

export default {
  inject: ["reload"],
  methods: {
    async listPluginPackages(pagesize, index) {
      const data = await listPluginPackages(index, pagesize);
      console.log(1234, data);
      if (data.status == 200) {
        this.tableData = data.data;
      }
    },
    editPlugin(row) {
      this.form = row;
      this.dialogFormVisible = true;
      // console.log(row)
    },
    delPlugin(row) {
      console.log(row.id);
      delPluginPackage(row.id);
      this.reload();
    },
    addPlugin() {
      this.loading = true;
      // if (this.form.id) {
      //   console.log('edit')
      //   editPluginPackage(this.form)
      // } else {
      // addPluginPackage(this.form)
      // }

      let myfile = this.$refs.myfile;
      let files = myfile.files;
      let file = files[0];

      console.log(1, file);

      let formData = new FormData();
      formData.append("file", file);
      formData.append("pkgName", this.form["pkgName"]);
      formData.append("pkgVersion", this.form["pkgVersion"]);
      formData.append("status", this.form["status"]);
      formData.append("projectName", this.form["projectName"]);
      formData.append("description", this.form["description"]);
      formData.append("tags", this.form["tags"]);
      formData.append("category", this.form["category"]);

      console.log("调用的formData", formData);
      // uploadPlugin(formData);
      uploadPlugin(formData).then((res) => {
        if (res.status == 200) {
          this.open2();
          this.dialogFormVisible = false;
          this.form = {};
          this.loading = false;
          this.reload();
        }
      });
      // this.dialogFormVisible = false;
      // this.form = {};
      // this.loading = false;
      // this.reload();
    },
    open2() {
      this.$message({
        message: "添加成功",
        type: "success",
      });
    },
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date === undefined) {
        return "";
      }
      return publicMethod.getTimestamp(date);
    },
    // 每页几条
    handleSizeChange(val) {
      console.log(12, val);
      // this.currentPage = val;
      let index = this.currentPage;
      this.listPluginPackages(val, index);
    },
    // 页数
    change(val) {
      console.log(123, val);
      // this.pageSize = val;
      let pageSize = this.pageSize;
      this.listPluginPackages(pageSize, val);
    },
    getHeader() {
      return { "Content-Type": "multipart/form-data" };
    },
  },
  mounted() {
    this.listPluginPackages(this.pageSize, this.currentPage);
    listPluginPackages().then((res) => {
      this.total = res.data.length;
    });

    listAllProjects().then((res) => {
      console.log(9999, res);
      this.projects = res.data.data;
    });
  },
  data() {
    return {
      tableData: [
        // {
        //   id: 1,
        //   name: "mol文件生成smiles",
        //   admin: "admin",
        //   version: "1.0",
        //   pluginType: "transform",
        //   pluginCategory: "输运数据",
        //   lang: "Python",
        //   pluginStatus: "dev",
        //   createTime: "2021-04-19 12:20:00",
        // },
        // {
        //   id: 2,
        //   name: "三参数转二参数",
        //   admin: "admin",
        //   version: "1.0",
        //   pluginType: "calc",
        //   pluginCategory: "动力学",
        //   lang: "Java",
        //   pluginStatus: "dev",
        //   createTime: "2021-04-19 12:20:00",
        // },
        // {
        //   id: 3,
        //   name: "SDfile生成",
        //   admin: "admin",
        //   version: "1.0",
        //   pluginType: "calc",
        //   pluginCategory: "热力学",
        //   lang: "Python",
        //   pluginStatus: "dev",
        //   createTime: "2021-04-19 12:20:00",
        // },
        // {
        //   id: 4,
        //   name: "mol文件生成smiles",
        //   admin: "admin",
        //   version: "2.0",
        //   pluginType: "transform",
        //   pluginCategory: "输运数据",
        //   lang: "Python",
        //   pluginStatus: "dev",
        //   createTime: "2021-04-19 12:20:00",
        // },
      ],
      total: "",
      currentPage: 1,
      pageSize: 10,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {},
      projects: [],
      loading: false,
      param: {},
    };
  },
};
</script>
<style lang="scss" scoped>
.block {
  margin: 10px 0px 0px 35px;
}
</style>
<style lang="scss" scoped>
::v-deep .el-form-item__label {
  font-size: 17px;
}
::v-deep .mb8 .el-button {
  font-size: 16px;
}
::v-deep .el-form .el-button {
  font-size: 16px;
}
// ::v-deep .el-form  .el-form-item {
// width: 24%;
// }

::v-deep .el-form .el-form-item {
  .el-form-item__error {
    width: 120px;
  }
}

::v-deep .el-dialog .el-form-item__label {
  width: 30px;
}

//去除input number样式
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
::v-deep input[type="number"] {
  -moz-appearance: textfield !important;
}
::v-deep .el-dialog .el-input__inner {
  width: 300px;
  line-height: 1px !important;
}

.element.style {
  width: 100px;
  min-width: 100px;
}

.app-container {
  background: rgb(254, 254, 254);
}

.pagination_style {
  height: 70px;
  margin-right: 40px;
}

.btn {
  .el-button {
    margin-left: 10px;
    margin-right: 5px;
  }
}
</style>
